<template>
  <div class="login-container">
    <div class="flex w-full h-full py-5 xl:h-auto xl:py-0 xl:my-0">
      <div class="container">
        <div>
          <h1 class="trs">{{ VITE_GLOB_APP_TITLE }}</h1>
        </div>
      </div>
      <div
        :class="`${prefixCls}-form`"
        class="relative w-full px-5 py-8 mx-auto my-auto rounded-md shadow-md xl:ml-16 xl:bg-transparent sm:px-8 xl:p-4 xl:shadow-none sm:w-3/4 lg:w-2/4 xl:w-auto enter-x"
      >
        <Form
          class="p-4 enter-x login"
          :model="formData"
          :rules="getFormRules"
          ref="formRef"
        >
          <h2
            class="mb-3 text-2xl font-bold text-center xl:text-3xl enter-x xl:text-left title"
          >
            欢迎使用 {{ VITE_GLOB_APP_SHORT_NAME }}
          </h2>
          <FormItem name="loginName" class="enter-x">
            <Input
              size="large"
              v-model:value="formData.loginName"
              :placeholder="t('sys.login.userName')"
              class="fix-auto-fill"
            >
              <template #prefix>
                <user-outlined type="user" />
              </template>
            </Input>
          </FormItem>
          <FormItem name="password" class="enter-x">
            <InputPassword
              size="large"
              visibilityToggle
              v-model:value="formData.password"
              :placeholder="t('sys.login.password')"
            >
              <template #prefix>
                <lock-outlined />
              </template>
            </InputPassword>
          </FormItem>
          <FormItem name="captcha" class="enter-x">
            <a-input
              v-model:value="formData.captcha"
              size="large"
              :placeholder="t('sys.login.captcha')"
              class="fix-auto-fill"
            >
              <template #addonAfter>
                <Image
                  @click.stop="getCaptchaImg"
                  :src="formData.captcharSrc"
                  width="100px"
                  :preview="false"
                />
              </template>
            </a-input>
          </FormItem>
          <ARow class="enter-x">
            <ACol :span="24">
              <FormItem>
                <Checkbox v-model:checked="rememberMe" size="small" style="float: left">
                  <!-- {{ t('sys.login.rememberMe') }} -->
                  自动登录
                </Checkbox>
                <!-- <span style="float: right; color: #2f6d69; cursor: pointer">忘记密码</span> -->
              </FormItem>
            </ACol>
          </ARow>
          <FormItem class="enter-x">
            <Button
              size="large"
              block
              @click="handleLogin"
              :loading="loading"
              style="background-color: #2f6d69; color: #fff"
            >
              {{ t("sys.login.loginButton") }}
            </Button>
          </FormItem>
        </Form>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { Button, Checkbox, Col, Form, Input, Row, Image } from "ant-design-vue";
import { reactive, ref } from "vue";
import { useFormRules, useFormValid } from "./useLogin";
import { getCaptcha } from "/@/api/sys/auth";
import { useI18n } from "/@/hooks/web/useI18n";
import { useMessage } from "/@/hooks/web/useMessage";
import { useUserStore } from "/@/store/modules/user";
import { getAppEnvConfig } from "/@/utils/env";

const ACol = Col;
const ARow = Row;
const FormItem = Form.Item;
const InputPassword = Input.Password;
const { t } = useI18n();
const { notification } = useMessage();
const userStore = useUserStore();
const { VITE_GLOB_APP_TITLE, VITE_GLOB_APP_SHORT_NAME } = getAppEnvConfig();

const { getFormRules } = useFormRules();

const formRef = ref();
const loading = ref(false);
const rememberMe = ref(false);

const formData = reactive({
  loginName: "admin",
  password: "111111",
  captcha: "",
  code: "",
  captcharSrc: "",
});

getCaptchaImg();

const { validForm } = useFormValid(formRef);

async function getCaptchaImg() {
  let result = await getCaptcha();
  formData.captcha = "";
  formData.code = result.data.code;
  formData.captcharSrc = result.data.captcha;
}

async function handleLogin() {
  const data = await validForm();
  if (!data) return;
  try {
    loading.value = true;
    let param: any = {
      password: data.password,
      loginName: data.loginName,
      mode: "message",
    };
    param.captcha = data.captcha;
    param.code = formData.code;
    const userInfo = await userStore.login(param);
    if (userInfo) {
      notification.success({
        message: t("sys.login.loginSuccessTitle"),
        description: `${t("sys.login.loginSuccessDesc")}: ${userInfo.loginName}`,
        duration: 3,
      });
    }
  } catch (error) {
    getCaptchaImg();
  } finally {
    loading.value = false;
  }
}
</script>
<style lang="less">
@prefix-cls: ~"@{namespace}-login";
@logo-prefix-cls: ~"@{namespace}-app-logo";
@countdown-prefix-cls: ~"@{namespace}-countdown-input";
@dark-bg: #293146;

.@{prefix-cls} {
  min-height: 100%;
  overflow: hidden;

  @media (max-width: @screen-xl) {
    background-color: #293146;

    .@{prefix-cls}-form {
      background-color: #fff;
    }
  }

  &::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-left: -48%;
    background-image: url(/@/assets/svg/login-bg.svg);
    background-position: 100%;
    background-repeat: no-repeat;
    background-size: auto 100%;
    content: "";

    @media (max-width: @screen-xl) {
      display: none;
    }
  }

  .@{logo-prefix-cls} {
    position: absolute;
    top: 12px;
    height: 30px;

    &__title {
      font-size: 16px;
      color: #fff;
    }

    img {
      width: 32px;
    }
  }

  &-sign-in-way {
    .anticon {
      font-size: 22px;
      color: #888;
      cursor: pointer;

      &:hover {
        color: @primary-color;
      }
    }
  }

  input:not([type="checkbox"]) {
    min-width: 360px;

    @media (max-width: @screen-xl) {
      min-width: 320px;
    }

    @media (max-width: @screen-lg) {
      min-width: 260px;
    }

    @media (max-width: @screen-md) {
      min-width: 240px;
    }

    @media (max-width: @screen-sm) {
      min-width: 160px;
    }
  }

  .@{countdown-prefix-cls} input {
    min-width: unset;
  }

  .ant-divider-inner-text {
    font-size: 12px;
    color: @text-color-secondary;
  }
}

image {
  width: 100px !important;
  height: 40px !important;
}

.login-container {
  width: 100%;
  height: 100%;
  background: url("../../src/assets/images/oa.png");
  background-size: cover;

  .container {
    width: 500px;
    margin: 20px;
  }

  .trs {
    color: #fff;
    font-size: 30px;
  }

  .login {
    width: 100%;
    background: url("../../src/assets/images/background.png");
    background-size: 100% 100%;
    padding: 30px 30px 10px;
    margin-left: 40%;
    margin-top: 45%;

    .title {
      color: #2f6d69;
      font-size: 18px;
    }
  }
}

:where(.css-dev-only-do-not-override-nuidd8).ant-input-group > .ant-input:last-child,
:where(.css-dev-only-do-not-override-nuidd8).ant-input-group
  .ant-input-group-addon:last-child {
  // border-start-start-radius: 0;
  // border-end-start-radius: 0;
  background-color: #fff;
}

// ::v-deep(.ant-input-group-addon) {
//   width: 100px;
//   height: 40px;
//   background-color: #fff;
// }
</style>
